<template>
  <!-- 访客来访记录 -->
  <div class="visitor-record chart-box1">
    <div class="chart-title">告警列表</div>
    <div class="chart-content">
      <ScrollTable
        :header="tableHeader"
        :list="list"
        :config="config"
        @onRowClick="onRecordClick"
        @onScrollBottom="onScrollBottom"
      />
    </div>

    <a-modal
      :visible="modalVisible"
      :footer="null"
      centered
      :width="0"
      @cancel="onModalClose"
      :destroyOnClose="true"
      :closable="false"
      :bodyStyle="{
        padding: 0,
      }"
    >
      <template v-if="currentRecord.id">
        <div
          style="
            background-color: rgba(0, 0, 0, 0.5);
            color: #ddd;
            padding: 1rem;
            border-radius: 0.8rem;
            border: 1px solid #999;
            backdrop-filter: blur(0.3rem);
            width: 30rem;
            transform: translate(5rem, -6rem);
          "
        >
          <div
            class="datav-scroller-bar"
            style="height: 45rem; overflow: hidden auto; padding: 0 1rem"
          >
            <div
              style="
                background-color: rgba(255, 255, 255, 0.5);
                display: inline-block;
                padding: 0.3rem 1.2rem;
                border-radius: 0.4rem;
              "
            >
              基本信息
            </div>
            <div
              v-for="(item, index) in currentRecord.content"
              :key="index"
              style="display: flex; margin-top: 1rem"
            >
              <div class="left_label">{{ item.label }}：</div>
              <div class="right_value" v-if="item.type == 'image'"></div>
              <div class="right_value" v-else>{{ item.value }}</div>
            </div>
            <template v-if="currentWorkOrder.id">
              <div
                style="
                  background-color: rgba(255, 255, 255, 0.4);
                  display: inline-block;
                  padding: 0.5rem 1.2rem;
                  border-radius: 0.4rem;
                  margin-top: 2rem;
                "
              >
                工单信息
              </div>
              <div style="display: flex; margin-top: 1rem">
                <div>工单编号：</div>
                <div>{{ currentWorkOrder.number }}</div>
              </div>
              <div style="display: flex; margin-top: 1rem">
                <div>工单类型：</div>
                <div>{{ currentWorkOrder.category_wholename }}</div>
              </div>
              <div style="display: flex; margin-top: 1rem">
                <div>上报时间：</div>
                <div>{{ currentWorkOrder.appear_time }}</div>
              </div>
              <div style="display: flex; margin-top: 1rem">
                <div>状态：</div>
                <div>{{ currentWorkOrder.status_txt }}</div>
              </div>
            </template>
          </div>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted, watch } from "vue";
import store from "../../../../store";
import ScrollTable from "../common/ScrollTable.vue";
import request from "../../../../common/utils/request";

export default defineComponent({
  name: "AlarmRecord",
  components: { ScrollTable },
  setup(props) {
    const state = reactive({
      tableHeader: [
        { key: "equipment_serial", title: "设备编号" },
        { key: "device_name", title: "设备名称" },
        { key: "address", title: "设备位置" },
        { key: "event_time", title: "上报时间" },
        { key: "alarm_handle_type_txt", title: "处理方式" },
        { key: "alarm_status_txt", title: "状态" },
      ],
      config: {
        style: [{ color: "#fff" }],
        span: [4, 4, 4, 4, 4, 4],
        rowClickable: true,
      },
      list: [],
      page: 1,
      pageSize: 10,
      hasMore: false,

      modalVisible: false,
      currentRecord: {},
      currentWorkOrder: {},
    });

    const getData = () => {
      request
        .get("/work_iot", "/center/alarm/list", {
          page: state.page,
          pageSize: state.pageSize,
        })
        .then((res) => {
          state.list = res.list;
          if (state.page < res.total_page) {
            state.hasMore = true;
          } else {
            state.hasMore = false;
          }
        });
    };
    getData();

    const getDetail = (id) => {
      state.modalVisible = true;
      request
        .get("/work_iot", "/equipment/alarm/detail", { id })
        .then((res) => {
          state.currentRecord = res;
          if (res.work_order_id) {
            request
              .get("/work_workorder", "/workorder/detail", {
                id: res.work_order_id,
                application: "WORK_ORDER_REPAIR",
              })
              .then((res) => {
                state.currentWorkOrder = res.detail;
              });
          }
        });
    };

    const onRecordClick = (index) => {
      getDetail(state.list[index].id);
    };

    const onModalClose = () => {
      state.currentRecord = {};
      state.currentWorkOrder = {};
      state.modalVisible = false;
    };

    const loadMore = () => {
      request
        .get("/work_iot", "/center/alarm/list", {
          page: state.page,
          pageSize: state.pageSize,
        })
        .then((res) => {
          state.list = state.list.concat(res.list);
          if (state.page < res.total_page) {
            state.hasMore = true;
          } else {
            state.hasMore = false;
          }
        });
    };

    const onScrollBottom = () => {
      if (state.hasMore) {
        state.page++;
        loadMore();
      }
    };

    return {
      ...toRefs(state),
      onRecordClick,
      onModalClose,
      onScrollBottom,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
